import { Button, Input, message, Modal, Popconfirm, Progress, Space, Table } from 'antd';
import { SearchOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './index.less';
import { useDispatch } from 'umi';
import { useState } from 'react';

function prodProdTag() {

    const dispatch = useDispatch();

    // 删除
    // 删除接口
    async function delfirm(text: any) {
        // await dispatch({
        //     type: 'page/delPageList',
        //     payload: text.id
        // })

        // await dispatch({
        //     type: 'page/getPageList',
        //     payload: page
        // })

    }

    // 表格配置
    const columns = [
        {
            title: 'ID',
            dataIndex: 'name',
            key: 'name',
            render: (text: any) => <a>{text}</a>,
            align: 'center'

        },
        {
            title: 'bean名称',
            dataIndex: 'path',
            key: 'path',
            align: 'center',

        },
        {
            title: '方法名称',
            dataIndex: 'order',
            align: 'center',
            key: 'order',
        },
        {
            title: '参数',
            align: 'center',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: 'cron表达式',
            align: 'center',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '备注',
            dataIndex: 'order',
            align: 'center',
            key: 'order',
        },
        {
            title: '状态',
            align: 'center',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '操作',
            align: 'center',
            key: 'action',
            render: (text: any, record: any) => (

                // <Space size="middle" className={styles.actionStyle}>

                //     <Button style={styles.edit}>编辑</Button>
                //     <a style={styles.downline}
                //         onClick={async () => {
                //             await dispatch({
                //                 type: 'page/changePageStatus',
                //                 payload: {
                //                     status: text.status === 'publish' ? 'draft' : 'publish', id: text.id
                //                 }
                //             })
                //             //     dispatch({
                //             //     type: 'page/getPageList',
                //             //     payload: page
                //             //   })
                //         }}
                //     >{text.status === 'publish' ? '下线' : '发布'}</a>
                //     {/* <a style={styles.watch} onClick={showModal}>查看访问</a> */}
                //     <Popconfirm placement="top" title={'确认删除？'}
                //         okText="确认" cancelText="取消" onConfirm={() => delfirm(text)} >
                //         <a style={styles.del}>删除</a>
                //     </Popconfirm>

                //     {/* <Modal title="访问统计" visible={isModalVisible} onCancel={handleCancel} footer={null}>
                //     <Progress
                //         strokeColor={{
                //             '0%': '#108ee9',
                //             '100%': '#87d068',
                //         }}
                //         percent={text.order / 100}
                //     />
                // </Modal> */}
                // </Space>
                <div className={styles.actionStyle}>
                    <p>
                        <a href="">修改</a>
                        <a href="">删除</a>
                        <a href="">暂停</a>
                    </p>
                    <p>
                        <a href="">恢复</a>
                        <a href="">立即执行</a>
                    </p>
                </div>
            ),
        },
    ];

    const dataSource = [
        {
            key: '1',
            path: '胡彦斌',
            order: 32,
            views: '西湖区湖底公园1号'
        },
        {
            key: '2',
            path: '胡彦斌',
            order: 32,
            views: '西湖区湖底公园1号'
        },
    ];

    // 全选单选
    // 设置多选框
    const [selectedRowKeys, changeSelectedRowKeys] = useState([])

    // 设置多选框联动效果按钮展示
    const [show, setShow] = useState(false)
    // 改变多选框
    function onSelectChange(selectedRowKeys: any) {
        changeSelectedRowKeys(selectedRowKeys);
        if (selectedRowKeys.length) {
            setShow(true);

        } else {
            setShow(false)
        }
    };
    // 将单选框赋值
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: false
    };
    // 批量删除
    // 批量删除
    function delAls() {
        selectedRowKeys.length && selectedRowKeys.map((item: any) => {
            // dispatch({
            //     type: 'page/delPageList',
            //     payload: item
            // })
            // dispatch({
            //     type: 'page/getPageList',
            //     payload: page
            // })
        })
    }

    async function confirm() {
        delAls();
        message.success('删除成功');
        setShow(false)
    }

    // 分页配置
    const paginationProps: any = {
        onChange: (page: number) => handlePageChange(page), //改变页码的函数   
    }
    // 获取当前页码
    const [page, setPage] = useState(1);
    function handlePageChange(page: number) {
        setPage(page);
    }

    return <div className={styles.prodpAge}>
        <nav>
        </nav>
        <section>
            <div className={styles.search}>
                <span className={styles.inputForm}><Input type="text" placeholder='参数名' /></span>
                <Button>查询</Button>
                <Button type="primary" >新增</Button>
                <Button disabled>批量删除</Button>
                <Button disabled>批量暂停</Button>
                <Button disabled>批量恢复</Button>
                <Button disabled>批量立即执行</Button>
                <Button disabled>日志列表</Button>
            </div>
            <div className={styles.table}>
                <Table columns={columns as any} dataSource={dataSource} rowSelection={rowSelection} pagination={paginationProps} bordered
                />
            </div>


        </section>
    </div>
}

export default prodProdTag;


